<template>
  <view class="jingdian">
    <scroll-view
      style="height: 110vh"
      scroll-y="true"
      @scrolltolower="loadMore"
      refresher-enabled="true"
      @refresherrefresh="onRefresh"
      :refresher-triggered="triggered"
    >
      <u-navbar
        leftText="景区实景"
        leftIcon=" "
        leftIconColor="#fff"
        safeAreaInsetTop
        bgColor="transparent"
      >
        <view class="u-nav-slot" slot="center">
          <u--input
            placeholder="景区"
            prefixIcon="search"
            color="#fff"
            border="none"
            placeholderStyle="color: #fff"
            :fontSize="14"
            clearable
            prefixIconStyle="font-size: 40rpx;color: #fff"
          ></u--input>
        </view>
      </u-navbar>

      <view class="top">
        <u-swiper
          class="top_swiper"
          :list="swiperImg"
          :interval="interval"
          :current="twoSwiper.index"
          circular
          @change="swiperChange"
        ></u-swiper>
				<!-- @click="clickSwiper" -->
      </view>

      <view class="center">
        <view class="top-swiper">
          <view class="box" id="topImg">
            <swiper
              :style="'height:' + MarginTop + 'px'"
              class="box_swiper"
              :previous-margin="twoSwiper.margin"
              :next-margin="twoSwiper.margin"
              circular
              :current="twoSwiper.index"
              :interval="interval"
              @change="swiperChange"
              :autoplay="true"
            >
              <swiper-item v-for="(item, index) in twoSwiper.list" :key="index">
                <!-- @click="clickTwoSwiper(index)" -->
                <image
                  class="le-img"
                  :src="item"
                  :class="{ 'le-active': twoSwiper.index == index }"
                ></image>
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>

      <view class="bottom">
        <view class="b_top">
          <u-tabs
            :list="[{ name: '距离优先' }, { name: '好评优先' }]"
            lineWidth="30"
            :current="tabsCurrent"
            :lineColor="`url(${lineBg}) 100% 100%`"
            :activeStyle="{ color: '#303133', fontWeight: 'bold' }"
            :inactiveStyle="{ color: '#606266' }"
            @click="toggleTabs"
          ></u-tabs>
        </view>

        <!-- scroll-y="true"
      style="height: 105%"
      @scrolltolower="loadMore" -->
        <view class="list_container">
          <view v-for="(i, index) in pageList" :key="index">
            <uni-card @click="toInfoPage(i.jingquId, i)">
              <view class="card">
                <view class="card_left">
                  <image class="" :src="i.jingquPictureUrl" />
                </view>
                <view class="card_right">
                  <view class="jingquName">{{ i.jingquName }}</view>
                  <view class="jingqu_tips" v-if="i.jingquTips">
                    <text v-for="(i2, index) in i.jingquTips" :key="index">{{
                      i2
                    }}</text>
                  </view>
                  <view class="address">
                    <uni-icons type="paperplane"></uni-icons>
                    距离{{ i.distance }}km
                  </view>
                  <view class="address">
                    <uni-icons type="location"></uni-icons>
                    {{ i.jingquAddress }}
                  </view>
                </view>
              </view>
            </uni-card>
          </view>
          <view style="height: 320rpx; background: transparent"></view>
        </view>
      </view>
    </scroll-view>

    <tabs :current="0" />
  </view>
</template>

<script>
import {
  getListWithJingDianApi, // 获取所有景区列表
  getListPageApi, // 景区分页
} from "@/api/jingqu";

export default {
  components: {},
  data() {
    return {
      triggered: false,
      MarginTop: 0,
      tabsCurrent: 0,
      longitude: 0,
      latitude: 0,
      swiperIdArr: [], // 景区id
      value1: 0,
      keyword: "",
      // 轮播图
      swiperImg: [],
      interval: 5000,
      current: 0,
      twoSwiper: {
        margin: "150rpx",
        index: 0,
        list: [],
      },
      // 分页接口
      pageList: [],
      total: 0,
      pageNum: 1,
      pageSize: 4,
      lineBg:
        "",
    };
  },

  // 监听页面加载
  onLoad() {
    setTimeout(() => {
      // 设置评价按钮的margin-top
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#topImg")
        .boundingClientRect((data) => {
          console.log(data, "topImgtopImg");
          this.MarginTop = data.height;
        })
        .exec();
    }, 1000);

    if (!this.longitude && !this.latitude) {
      this.getUserLocation(false);
    } else {
      this.getUserLocation(true);
    }
  },

  // 监听页面显示
  onShow() {
    this.init();
  },

  // 监听页面隐藏
  onHide() {
    // this.longitude = 0;
    // this.latitude = 0;
  },

  onPullDownRefresh() {
    this.onRefresh();
  },
  // 触底事件
  onReachBottom() {
    this.loadMore();
  },
  methods: {
    // 初始化
    init() {
      this.getListWithJingDian();
    },

    // 自定义下拉刷新
    onRefresh() {
      this.triggered = true;
      this.pageNum = 1;
      this.total = 0;
      this.pageList = [];

      // 将保存的经纬度清除,重新获取
      this.longitude = 0;
      this.latitude = 0;
      this.getUserLocation(false);
    },

    // 切换距离优先还是好评优先
    toggleTabs(e) {
      this.tabsCurrent = e.index;
      uni.pageScrollTo({
        scrollTop: 0, // 滚动到顶部
        duration: 300, // 滚动动画时长，单位为毫秒，默认值为300
      });

      this.pageNum = 1;
      this.total = 0;
      this.pageList = [];
      console.log(e);
      this.getListPageFun(this.latitude, this.longitude);
    },
    // 上拉加载更多
    loadMore() {
      let self = this;
      console.log(this.latitude, this.latitude, "aaaaaaaa");
      if (this.pageNum * this.pageSize >= this.total) {
        uni.showToast({
          title: "数据全部加载完成",
          icon: "success",
          mask: true,
        });
      } else {
        this.pageNum++; // 增加页码
        this.getListPageFun(self.latitude, self.longitude);
      }
    },

    // 获取用户经纬度
    getUserLocation(isHasPosition) {
      let self = this;
      // 判断有没有经纬度
      if (isHasPosition) {
        self.getListPageFun(self.latitude, self.longitude);
      } else {
        uni.getLocation({
          type: "gcj02",
          isHighAccuracy: true,
          success(res) {
            console.log(res);
            self.getListPageFun(res.latitude, res.longitude);
          },
          fail(err) {
            console.log(err);
            self.getListPageFun(0, 0);
          },
        });
      }
    },

    // 点击列表跳转
    toInfoPage(jingquId, item) {
      console.log(jingquId, item);
      uni.navigateTo({
        url: `/pages/liveAction/pages/infoPage?jingquId=${jingquId}`,
      });
    },

    // 分页获取数据
    getListPageFun(latitude, longitude) {
      if (!this.latitude && !this.longitude) {
        this.latitude = latitude;
        this.longitude = longitude;
      }
      let self = this;

      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        lat: latitude ? latitude : 31.85,
        lon: longitude ? longitude : 117.19,
      };
      if (this.tabsCurrent) {
        data.good = true;
      }

      getListPageApi(data)
        .then((res) => {
          // uni.stopPullDownRefresh();
          this.triggered = false;
          if (res.code === 200) {
            this.total = res.total;
            if (res.total) {
              for (let i = 0; i < res.rows.length; i++) {
                res.rows[i].jingquTips = res.rows[i].jingquTips.split(",");
              }
              const arr = res.rows;
              this.pageList = this.pageList.concat(arr);
            }
          } else {
            this.pageList = [];
            this.total = 0;
          }
        })
        .catch((err) => {
          console.log(err);
          this.pageList = [];
          this.total = 0;
          this.triggered = false;
          // uni.stopPullDownRefresh();
        });
    },

    // 获取所有景区列表-用于背景
    getListWithJingDian() {
      getListWithJingDianApi()
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            // 保存景区id
            this.swiperIdArr = res.data.map((v) => {
              return v.jingquId;
            });
            this.swiperImg = res.data.map((v) => {
              return v.jingquPictureUrl;
            });
            this.twoSwiper.list = this.swiperImg;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //swiper滑动事件
    swiperChange: function (e) {
      if (e.detail) {
        this.twoSwiper.index = e.detail.current;
      } else {
        this.twoSwiper.index = e.current;
      }
    },

    // swiper点击事件
    clickSwiper(e) {
			console.log(e);
      this.toInfoPage(this.swiperIdArr[e]);
    },
    clickTwoSwiper(e) {
      this.toInfoPage(this.swiperIdArr[e]);
    },
  },
};
</script>

<style lang="scss">
::v-deep .u-nav-slot {
  width: 300rpx !important;
  overflow: hidden !important;
  border-radius: 152rpx !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

::v-deep .u-input {
  padding: 10rpx 0 8rpx 12rpx !important;
}

page {
  background: #f3f3f3;
}

.jingdian {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .top {
    width: 100%;
    height: 34%;

    .u-swiper {
      height: 100% !important;
    }

    .u-swiper__wrapper {
      height: 100% !important;
    }

    .u-swiper__wrapper__item__wrapper__image {
      height: 100% !important;
    }
  }

  .center {
    width: 100%;
    height: 40%;
    border-radius: 32rpx;
    overflow: hidden;
    margin-top: -37%;

    .top-swiper {
      margin-bottom: 30rpx;
      height: 100%;

      .bg {
        padding-top: var(--status-bar-height);
        box-sizing: content-box;
        width: 100%;
        height: 100%;
        position: relative;
      }

      .box {
        box-sizing: content-box;
        width: 100%;
        height: 100%;
      }

      .box_swiper {
        height: 100%;
        margin: 0 20rpx;

        .le-img {
          width: 100%;
          height: 100%;
          display: block;
          transform: scale(0.75);
          transition: transform 0.3s ease-in-out 0s;
          border-radius: 20rpx;

          &.le-active {
            transform: scale(1);
          }
        }
      }
    }
  }

  .bottom {
    width: 100%;

    .b_top {
      width: 100%;
      height: 88rpx;
      padding: 10rpx 0;
    }

    .list_container {
      height: 100%;
    }

    .card {
      display: flex !important;

      .card_left {
        image {
          width: 206rpx;
          height: 206rpx;
          border-radius: 10rpx;
        }
      }

      .card_right {
        margin-left: 32rpx;

        .jingquName {
          font-size: 32rpx;
          font-weight: 500;
          color: #333333;
          line-height: 48rpx;
        }

        .jingqu_tips {
          margin: 16rpx 0;

          text {
            display: inline-block;
            border: 2rpx #01756b solid;
            color: #01756b;
            margin-right: 6rpx;
            margin-bottom: 6rpx;
            padding: 0 4rpx;
            border-radius: 8rpx;
          }
        }

        .location {
          margin-top: 16rpx;
        }
      }
    }
  }
}

// 状态栏
.system_bar {
  width: 750rpx;
  margin-bottom: 6rpx;
}

.search {
  position: fixed;
  left: 30rpx;
  top: 0;
  z-index: 100;

  .search_top {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 36rpx;
    position: absolute;

    .top_text {
      margin-right: 20rpx;
    }
  }
}

.u-search {
  .u-search__content {
    width: 340rpx !important;
  }

  .u-search__content__input {
    background-color: transparent !important;
  }
}

::v-deep .u-tabs__wrapper__nav__item {
  &:first-child {
    border-right: 2rpx #d8d8d8 solid;
  }
  flex: 1 1 0% !important;
}
</style>
